<template>
  <el-input @input="changeInp" v-model="inp" placeholder="请输入要筛选的内容" class="input-with-select">
    <template #prepend>
      <el-select @change="getcate" v-model="select" placeholder="Select" style="width: 115px">
        <el-option value="" label="全部" />
        <el-option v-for="(item, index) in categoryData" :key="index" :label="item" :value="item" />
      </el-select>
    </template>
    <template #append>
      <el-button :icon="Search" />
    </template>
  </el-input>

  <el-table :data="searchPro" border style="width: 100%">
    <el-table-column type="index" prop="date" label="序号" width="70" />
    <el-table-column prop="img" label="图片" width="100">
      <template #default="scope">
        <img :src="scope.row.img1">
      </template>
    </el-table-column>
    <el-table-column prop="address" label="名称" width="200">
      <template #default="scope">
        <p>{{ scope.row.proname }}</p>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="品牌" width="150">
      <template #default="scope">
        <p>{{ scope.row.brand }}</p>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="分类">
      <template #default="scope">
        <p>{{ scope.row.category }}</p>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="原价">
      <template #default="scope">
        <p>{{ scope.row.originprice }}</p>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="折扣">
      <template #default="scope">
        <p>{{ scope.row.discount }}</p>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="销量">
      <template #default="scope">
        <p>{{ scope.row.sales }}</p>
      </template>
    </el-table-column>

  </el-table>
</template>

<script setup lang="ts">
import service from '@/utils/service';
import { Search } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'

let categoryData = reactive([])
const inp = ref('')
const select = ref()

let searchPro = reactive([])


// 获取分类
function getCategory() {
  service({
    url: '/admin/pro/getCategory'
  }).then((res: any) => {
    if (res.data.code === '200') {
      categoryData.push(...res.data.data)
    }
  })
}
getCategory()


// 修改下拉菜单
const getcate = (val) => {
  console.log('val', val);
  getSearch(val, inp.value)
}
getcate()


// 获取inp值
const changeInp = (v) => {
  getSearch('', v)
}
getSearch()
// 获取筛选
function getSearch(v1, v2) {
  service({
    url: '/admin/pro/searchPro',
    method: 'post',
    data: {
      category: v1,
      search: v2
    }
  }).then((res: any) => {
      if (res.data.code === '200') {
        searchPro.length = 0
        searchPro.push(...res.data.data)
      }
    })
}

</script>

<style scoped>
.el-table {
  margin-top: 20px;
  border-radius: 15px;
}

img {
  width: 60px;
  height: 60px;
}
</style>